<template>
  <ul class="tabbar flex flex-rb ta-center">
    <li class="click" v-for="(v, i) in tabs" :key="i" @click="onTabClick(i)">
      <img
        style="display: inline-block; width: 30px"
        :src="i === tabIndex ? v.activeIcon : v.icon"
      />
      <div>{{ v.name }}</div>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const props = defineProps(['tabIndex'])
const emit = defineEmits(['update:tabIndex', 'change'])

// Tab列表
const tabs = ref([
  {
    name: $t('购物'),
    icon: loadImage('/tabbar/shop.png'),
    activeIcon: loadImage('/tabbar/shop_active.png'),
  },
  {
    name: $t('订单'),
    icon: loadImage('/tabbar/car.png'),
    activeIcon: loadImage('/tabbar/car_active.png'),
  },
  {
    name: $t('产出'),
    icon: loadImage('/tabbar/output.png'),
    activeIcon: loadImage('/tabbar/output_active.png'),
    to: location.origin + '/lgsc',
  },
])
const tabIndex = ref(props.tabIndex || 0)

function onTabClick(i) {
  const tab = tabs.value[i]

  if (tab.to) {
    location.replace(tab.to)
  } else {
    tabIndex.value = i
    emit('update:tabIndex', i)
    emit('change')
  }
}

function loadImage(url = '') {
  return new URL(url, import.meta.url).href
}
</script>

<style lang="scss" scoped></style>
